const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')  
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const cssMinimizer = require('css-minimizer-webpack-plugin')

module.exports = {
  entry: './src/index.js', //如果传入一个字符串或字符串数组，chunk 会被命名为 main。如果传入一个对象（多入口），则每个属性的键(key)会是 chunk 的名称，该属性的值描述了 chunk 的入口点。
  

  output:{
    filename: 'js/[contenthash].bundle.js',  //名字必须是hash  避免名字相同时 改了代码存在缓存 不会刷新
    path: path.resolve(__dirname, './dist'), //必须用path生成绝对路径  不能直接./dist相对路径
    clean: true,
    assetModuleFilename:'image/[contenthash][ext]', //contenthash 是根据内容生成的hash串  ext  后缀名
    //webpack 打包后的自执行函数不使用箭头函数（兼容低版本浏览器）
    environment:{
      arrowFunctions: false
    }
  },

  mode:'none',
  
  devtool: 'inline-source-map',

  devServer: {
    static: './dist',
    compress:true, //服务器传输是是否压缩（gzip）
  },

  plugins: [
    //自动将打包的文件 导入html插件
    new htmlWebpackPlugin({
      template:'./public/index.html', //使用的入口模板
      filename: 'app.html',  //导出模板的名字
      inject:'body' //导入文件的位置
    }),
    new miniCssExtractPlugin({
      filename:'style/[contenthash][ext]',  
    }),//抽离css插件 合并成一个文件  基于webpack5

  ],

  module: {
    rules: [
      {
        test: /\.ts$/,
        use:[{
          loader: 'babel-loader',
          //设置预定义的环境
          options: {
            presets:[
              //指定环境的插件
              '@babel/presets-env',
              {
                targets:{
                  //要兼容的浏览器
                  "chrome":'88',
                  "ie":'11', //需要转换
                },
                //指定core.js版本
                'core.js':'3',
                //使用core.js按需加载
                'useBuiltIns':'usage'
              }
            ]
          }
        },
        'ts-loader'
        ],
      },
      {
        test: /\.png$/,
        type:'asset/resource',   //资源是http://localhost xxx   url类型
        generator: {
          filename:'image/[contenthash][ext]',  //优先级高于assetModuleFilename  没有设置则用assetModuleFilename
        }
      },
      {
        test: /\.svg$/,
        type:'asset/inline',   //资源是base64类型
        generator: {
          filename:'image/[contenthash][ext]',  
        }
      },
      {
        test: /\.txt$/,
        type:'asset/source',   //资源是源数据
        generator: {
          filename:'image/[contenthash][ext]',  
        }
      },
      {
        test: /\.jpg$/,
        type:'asset',   //资源是自动选择合适的资源方式   默认文件小于8k则是base64,大于是url,可以修改临界值
        parser: {
          dataUrlCondition:{
            maxSize:4*1024*1024
          }
        },
        generator: {
          filename:'image/[contenthash][ext]',  
        }
      },
      //webpack自带加载js和json类型   css等其他的都需要借助其他loader包来进行解析加载  use里的使用顺序是逆序的
      {
        test: /\.(css|less)$/,
        //use:['style-loader','css-loader','less-loader'],
        use:['miniCssExtractPlugin.loader','css-loader','less-loader'],
      },
    ]
  },
  //那些可以用模块化
  resolve: {
      extensions:['.vue','.js', '.ts', '.css', '.less']
  },
//优化
  optimization: {
    minimizer:[
      new cssMinimizer()
    ],
    // splitChunks:{ 
    //   cacheGroups:{   //对node_modules中所有包进行缓存
    //     vendor:{
    //       test: /[\\/]node_modules[\\/]/,
    //       name:'vendor',
    //       chunk:'all'
    //     }
    //   }
    // }
  }
  
}
